<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
		<link rel="stylesheet" href="css/mint-style.css">
		 <script src="js/vue_resource.js"></script>
	</head>
		<script src="js/serverUrl.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/mint.js"></script>
		<script src="js/moment.js"></script>

		<style type="text/css">
			
			.userInfoContainer{
				display: flex;
				flex-direction: row;
				width: 100vw;
				background: white;
				padding-top: 8px;
				padding-bottom: 8px;
				align-items: center;
                border-top: 1px solid #f0f0f0;
			}
			.label{
                width:36vw;
				font-size: 4vw;
                margin-left:5vw;
			}
			.contentLabel{
				width:50vw;
				font-size: 4vw;
				border-radius: 5px;
				border: 0px;
				padding: 8px;
			}
			
			input::-webkit-input-placeholder{
				color:#5591da;
			}
			input::-moz-placeholder{   /* Mozilla Firefox 19+ */
				color:#5591da;
			}
			input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
				color:#5591da;
			}
			input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
				color:#5591da;
			}
		</style>
	<body style="background-color: #ffffff;">
		<div id="app" style="background-color: #ffffff;">
			<div class="userInfoContainer">
				<div class="label">用户名</div>
                <div class="contentLabel" >{{userInfo.userName}}</div>
			</div>
		
			<div class="userInfoContainer">
				<div class="label">账号</div>
                <div class="contentLabel" >{{userInfo.userMobile}}</div>
			</div>
			
			<div class="userInfoContainer">
				<div class="label">职称</div>
				<input class="contentLabel" placeholder="请输入职称"  v-model="userInfo.jobLevel"/>
			</div>
			
			<div class="userInfoContainer">
				<div class="label">岗位/职务</div>
				<input class="contentLabel" placeholder="请输入岗位/职务"  v-model="userInfo.job"/>
			</div>
			<div class="userInfoContainer">
				<div class="label">手机号</div>
				<input class="contentLabel" placeholder="请输入手机号"  v-model="userInfo.mobile"/>
			</div>
			<div class="userInfoContainer">
				<div class="label">邮箱</div>
				<input class="contentLabel" placeholder="请输入邮箱"  v-model="userInfo.mail"/>
			</div>
			<div class="userInfoContainer">
				<div class="label">身份证号</div>
				<input class="contentLabel" placeholder="请输入身份证号"  v-model="userInfo.code"/>
			</div>
			<div class="userInfoContainer">
				<div class="label">民族</div>
				<div v-if="userInfo.nation == ''" @click.stop="nationVisible = true" class="contentLabel"  style="color: #5591da;" >请选择民族</div>
				<div v-if="userInfo.nation != ''" @click.stop="nationVisible = true" class="contentLabel"  >{{userInfo.nation}}</div>
			</div>
			<div class="userInfoContainer">
				<div class="label">出生日期</div>
				<div v-if="userInfo.birthday == null " class="contentLabel" @click.stop="openDatePicker()" style="color: #5591da;" >请选择出生日期</div>
                <div v-if="userInfo.birthday != null "
                    class="contentLabel"
                    @click.stop="openDatePicker()"
                
                   >{{ userInfo.birthday | formatTime}}</div>
			</div>
			<div class="userInfoContainer">
				<div class="label">政治面貌</div>
				<div v-if="userInfo.politic == ''" class="contentLabel" @click.stop="politicVisible = true" style="color: #5591da;" >请选择政治面貌</div>
				<div v-if="userInfo.politic != ''" class="contentLabel" @click.stop="politicVisible = true">{{userInfo.politic}}</div>
			</div>
			<div class="userInfoContainer">
				<div class="label">最高学历</div>
				<div v-if="userInfo.education == ''" class="contentLabel"  @click.stop="educationVisible = true"  style="color: #5591da;" >请选择最高学历</div>
				<div v-if="userInfo.education != ''" class="contentLabel"  @click.stop="educationVisible = true"  >{{userInfo.education}}</div>
			</div>
			<div class="userInfoContainer">
				<div class="label">毕业院校</div>
				<input class="contentLabel" placeholder="请输入毕业院校"  v-model="userInfo.school"/>
			</div>
			<div class="userInfoContainer">
				<div class="label">所学专业</div>
				<input class="contentLabel" placeholder="请输入所学专业"  v-model="userInfo.specialty"/>
			</div>
			
			<vue-picker
                ref="picker1"
                :data="nationData"
                @confirm="nationChange"
                :visible.sync="nationVisible">
				
			</vue-picker>
			
 			<vue-picker
                ref="picker2"
                :data="educationData"
                @confirm="educationChange"
                :visible.sync="educationVisible">
				
			</vue-picker>
			
			<vue-picker
                ref="picker3"
                :data="politicData"
                @confirm="politicChange"
                :visible.sync="politicVisible">
				
			</vue-picker>
			
		  <mt-datetime-picker
			ref="picker"
			type="date"
			:start-date = "startDate"
			year-format="{value} 年"
			month-format="{value} 月"
			date-format="{value} 日"
            v-model="dateVal"
            @confirm="dateConfirm"
		   >
		  </mt-datetime-picker>
		</div>
	</body>

	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data(){
			  return {
				userInfo: {
				},
				nationVisible: false,
				birthVisible: false,
				politicVisible: false,
				educationVisible:false,
				nationData: [nation],
				startDate:new Date("1901-01-01"),
				educationData:[educationList],
				politicData: [politic],
                dateVal: new Date()
			  }

		  },
		  filters:{
			  formatTime (val) {
				return moment(val).format("YYYY年MM月DD日")
			  }
		  },
		  created() {
              var now = new Date();
              now.setFullYear(now.getFullYear()-20)
              this.dateVal = now
              window.getUserInfo = this.getUserInfo
              window.submitInfo = this.submitInfo
		  },
		  methods:{
              getUserInfo(userInfo) {
                  this.userInfo = userInfo
              },
			  openDatePicker (){
                  if(this.userInfo.birthday!=null){
                      this.dateVal = this.userInfo.birthday
                  }
				this.$refs.picker.open();
			  },
			  nationChange (val) {
                  this.userInfo.nation = val[0].value
			  },
              educationChange (val) {
                   this.userInfo.education = val[0].value
              },
              politicChange (val) {
                  this.userInfo.politic = val[0].value
              },
              dateConfirm () {
                  this.userInfo.birthday = this.dateVal
              },
              submitInfo(){
                  WebViewJavascriptBridge.callHandler('submitInfo',this.userInfo);
              }
		  }
		})		
		</script>
            <script src="js/picker.js"></script>
</html>
